<!-- AI 助手悬浮按钮 -->
<div class="ai-fab" (click)="toggleChat()" [class.active]="isOpen">
  <svg class="ai-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 17H11V15H13V17ZM13 13H11V7H13V13Z" fill="currentColor"/>
  </svg>
  <span class="ai-fab-text">AI</span>
</div>

<!-- AI 聊天窗口 -->
<div class="ai-chat-container" *ngIf="isOpen" [class.minimized]="isMinimized">
  <!-- 窗口头部 -->
  <div class="chat-header">
    <div class="header-left">
      <div class="ai-avatar">🤖</div>
      <div class="header-info">
        <h3 class="header-title">AI 助手</h3>
        <span class="header-status">在线</span>
      </div>
    </div>
    <div class="header-actions">
      <button class="header-btn" (click)="clearChat()" title="清空对话">
        <svg viewBox="0 0 24 24" fill="none">
          <path d="M6 19C6 20.1 6.9 21 8 21H16C17.1 21 18 20.1 18 19V7H6V19ZM19 4H15.5L14.5 3H9.5L8.5 4H5V6H19V4Z" fill="currentColor"/>
        </svg>
      </button>
      <button class="header-btn" (click)="minimizeChat()" title="最小化">
        <svg viewBox="0 0 24 24" fill="none">
          <path d="M19 13H5V11H19V13Z" fill="currentColor"/>
        </svg>
      </button>
      <button class="header-btn" (click)="closeChat()" title="关闭">
        <svg viewBox="0 0 24 24" fill="none">
          <path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z" fill="currentColor"/>
        </svg>
      </button>
    </div>
  </div>

  <!-- 消息列表 -->
  <div class="chat-messages" *ngIf="!isMinimized">
    <div *ngFor="let message of messages" 
         class="message-wrapper"
         [class.user-message]="message.role === 'user'"
         [class.ai-message]="message.role === 'assistant'">
      
      <!-- AI 消息 -->
      <div *ngIf="message.role === 'assistant'" class="message-container">
        <div class="message-avatar">🤖</div>
        <div class="message-content">
          <div class="message-bubble" *ngIf="!message.isLoading">
            <div class="message-text" [innerHTML]="message.content | nl2br"></div>
            <div class="message-time">{{ formatTime(message.timestamp) }}</div>
          </div>
          <!-- 加载动画 -->
          <div class="message-bubble loading" *ngIf="message.isLoading">
            <div class="typing-indicator">
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
        </div>
      </div>

      <!-- 用户消息 -->
      <div *ngIf="message.role === 'user'" class="message-container">
        <div class="message-content">
          <div class="message-bubble">
            <div class="message-text">{{ message.content }}</div>
            <div class="message-time">{{ formatTime(message.timestamp) }}</div>
          </div>
        </div>
        <div class="message-avatar user">👤</div>
      </div>
    </div>

    <!-- 快捷问题 -->
    <div class="quick-questions" *ngIf="messages.length <= 1">
      <div class="quick-question-label">💡 快捷问题：</div>
      <button *ngFor="let question of quickQuestions" 
              class="quick-question-btn"
              (click)="selectQuickQuestion(question)">
        {{ question }}
      </button>
    </div>
  </div>

  <!-- 输入区域 -->
  <div class="chat-input-container" *ngIf="!isMinimized">
    <div class="input-wrapper">
      <input 
        type="text" 
        class="chat-input"
        [(ngModel)]="userInput"
        (keyup.enter)="sendMessage()"
        [disabled]="isLoading"
        placeholder="输入您的问题..."
      />
      <button 
        class="send-btn"
        (click)="sendMessage()"
        [disabled]="!userInput.trim() || isLoading">
        <svg viewBox="0 0 24 24" fill="none">
          <path d="M2.01 21L23 12L2.01 3L2 10L17 12L2 14L2.01 21Z" fill="currentColor"/>
        </svg>
      </button>
    </div>
    <div class="input-hint">
      按 Enter 发送 • AI 助手可能会出错，请谨慎参考
    </div>
  </div>
</div>
